<!doctype html>
<html>

<head>
    <title>CesiumNavigation Demo</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    
    <link rel="stylesheet" type="text/css" href="./Cesium/Widgets/widgets.css">
    <link rel="stylesheet" type="text/css" href="../dist/cesium-navigation.css">
    <script type="text/javascript" src="./Cesium/Cesium.js"></script>
    <script type="text/javascript" src="../dist/CesiumNavigation.umd.js"></script>

<body>
    <div id="test" style="width:100%;height:100%"></div>

    <script type="text/javascript">

        var viewer = new Cesium.Viewer(document.getElementById('test'), {
            imageryProvider: false,
            baseLayerPicker: false,
            timeline: false,
            infoBox: false,
            navigationHelpButton: false,
            fullscreenButton: false,
            animation: false,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false

        });


        var provider =  new Cesium.WebMapTileServiceImageryProvider({
            url:
              "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=93d1fdef41f93d2211deed6d22780c48",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
          })

        var layer = new Cesium.ImageryLayer(provider, {
           
        });

        viewer.imageryLayers.add(layer);


        var options = {};
        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
        // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
        options.enableCompass = true;
        // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
        options.enableZoomControls = true;
        // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
        options.enableDistanceLegend = true;
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        options.enableCompassOuterRing = true;

        CesiumNavigation.umd(viewer, options);

    </script>
</body>

</html>